<html>

<head>
    <style>
        .fade-enter-active {
            transition: all .3s ease;
        }

        .fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .fade-enter,
        .fade-leave-to {
            transform: translateX(10px);
            opacity: 0;
        }
    </style>
    <script src="./libs/dat.gui.js"> </script>
    <script src="https://unpkg.com/vue"></script>

    <div id="app">
        <p>{{ message }}</p>
        <p v-if="seen">现在你看到我了</p>
    </div>

    <div id="Animation">
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>

</head>

<body>
    <script>
        var gui = new dat.GUI();
        gui.open();

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                seen: true,
            }
        });

        var folderApp = gui.addFolder('App');
        folderApp.open();
        folderApp.add(app.$data, 'seen').listen();
        folderApp.add(app.$data, 'message').listen();

        var animation = new Vue({
            el: '#Animation',
            data: {
                show: true
            }
        });

        var folderAni = gui.addFolder('Animation');
        folderAni.open();
        folderAni.add(animation.$data, 'show').listen();

    </script>
</body>

</html>